<template>
  <div id="addUserLabels">
    <el-dialog
      :title="isAdd ? '添加子频道' : '编辑子频道'"
      :visible.sync="dialogData.isShow"
      width="500px"
      :before-close="labelHandleClose"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="form-box">
        <el-form-item label="子频道名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入子频道名称.最少2个字最多5个字"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click.prevent="confirmLabel('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getForm, addContTag, editContTag } from '@/api/appSetting/contentTag' // 接口
export default {
  name: 'AddUserLabels',
  msg: '生活内容管理-新增弹窗',
  props: ['dialogData'],
  data: function() {
    //校验标签名
    var valiTagName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('子频道名称不能为空'))
      }
      var length_ = value.length
      if (length_ > 5 || length_ < 2) {
        callback(new Error('子频道名称2-5个字'))
      }
      callback()
    }
    return {
      isAdd: true, // 新增-true,编辑-false
      loading: false,
      id: '',
      ruleForm: {
        name: ''
      },
      rules: {
        name: [{ validator: valiTagName, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.id = this.dialogData.id
    this.isAdd = this.dialogData.cId ? false : true
    if (!this.isAdd) {
      // 编辑
      this.cId = this.dialogData.cId
      this.getFormData()
    }
  },
  methods: {
    /* 编辑时获取表单详情 */
    getFormData() {
      getForm(this.id, this.cId, (response) => {
        this.ruleForm = { ...response }
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let obj = {
            name: this.ruleForm.name
          }
          if (this.isAdd) {
            addContTag(
              this.id,
              obj,
              (response) => {
                this.loading = false
                this.$emit('refresh')
                this.cancelLabel()
              },
              (response) => {
                this.loading = false
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          } else {
            let obj = {
              channelName: this.ruleForm.name
            }
            // 编辑
            editContTag(
              this.id,
              this.cId,
              obj,
              (response) => {
                this.loading = false
                this.$emit('refresh')
                this.cancelLabel()
              },
              (response) => {
                this.loading = false
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#addUserLabels {
  // .form-box {
  //   height: 300px;
  // }
  // .form-box {
  //   padding-left: 100px;
  // }
  .el-input {
    width: 293px;
  }
  .el-select {
    width: 65%;
  }
  // .el-dialog {
  //   border-radius: 4px;
  //   .el-dialog__header {
  //     border-bottom: 1px solid rgba(225, 228, 233, 1);
  //   }
  // }
  // .el-dialog__footer {
  //   margin-top: 50px;
  //   padding: 10px;
  //   /*border-top: 1px solid #eeeeee;*/
  // }
}
</style>
